import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import api from '../utils/api';
import { RequestError } from '../utils/request';
import { deleteByPrefix, deleteCaseImages as deleteCaseImagesFromOSS } from '../utils/oss';
import { userStorage } from '../utils/storage';
import './PageCommon.css';
import './CourseManagement.css';

function CaseManagement() {
  const navigate = useNavigate();
  const location = useLocation();
  const [cases, setCases] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 获取案例列表 - 首次加载
  useEffect(() => {
    fetchCaseList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 监听路由变化，当返回到案例管理页面时刷新数据
  useEffect(() => {
    if (location.pathname === '/main/case') {
      fetchCaseList();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.pathname]);

  const fetchCaseList = async () => {
    try {
      setLoading(true);
      setError(null);

      // 从 storage 获取用户信息
      const userInfo = userStorage.getUserInfo();
      if (!userInfo) {
        setError('未获取到用户信息，请重新登录');
        navigate('/login');
        return;
      }

      const phone = userInfo.phone;
      if (!phone) {
        setError('用户手机号不存在，请重新登录');
        navigate('/login');
        return;
      }

      console.log('查询案例列表，手机号:', phone);

      // 调用获取案例列表接口
      const result = await api.case.getCasesByTeacherPhone(phone);
      
      console.log('案例列表结果:', result);

      // 处理结果（根据实际返回格式调整）
      if (Array.isArray(result)) {
        setCases(result);
      } else if (result && Array.isArray(result.cases)) {
        setCases(result.cases);
      } else if (result && Array.isArray(result.data)) {
        setCases(result.data);
      }

    } catch (error) {
      console.error('获取案例列表失败:', error);
      if (error instanceof RequestError) {
        setError(error.message);
      } else {
        setError('获取案例列表失败，请重试');
      }
    } finally {
      setLoading(false);
    }
  };

  const handleCreateCase = () => {
    // 跳转到创建案例页面
    navigate('/main/create-case');
  };

  const handleEditCase = (caseItem) => {
    console.log('编辑案例:', caseItem);
    // 跳转到编辑案例页面
    navigate(`/main/edit-case/${caseItem._id}`);
  };

  const handleDeleteCase = async (caseItem) => {
    if (!window.confirm(`确定要删除案例"${caseItem.caseTitle}"吗？\n删除后将无法恢复！`)) {
      return;
    }
    
    try {
      console.log('删除案例:', caseItem);
      
      // 1. 先删除数据库中的案例记录
      await api.case.removeCaseById(caseItem._id);
      
      alert(`案例"${caseItem.caseTitle}"已成功删除`);
      
      // 2. 刷新案例列表
      fetchCaseList();
      
      // 3. 异步删除OSS上的图片文件（不阻塞用户操作）
      deleteCaseImages(caseItem);
      
    } catch (error) {
      console.error('删除案例失败:', error);
      if (error instanceof RequestError) {
        alert(`删除案例失败: ${error.message}`);
      } else {
        alert('删除案例失败，请重试');
      }
    }
  };

  // 异步删除OSS图片文件
  const deleteCaseImages = async (caseItem) => {
    try {
      // 获取图片路径数组（优先使用ossImages，如果没有则使用caseImages）
      const imagePaths = caseItem.ossImages || caseItem.caseImages || [];
      
      console.log('案例图片路径:', imagePaths);
      console.log('案例完整数据:', caseItem);
      
      if (!imagePaths || imagePaths.length === 0) {
        console.log('案例没有图片，跳过OSS文件删除');
        return;
      }

      // 从第一个图片路径中提取文件夹前缀
      // 图片路径格式：casePics/手机号/时间戳/pic1.jpg
      // 文件夹路径：casePics/手机号/时间戳/
      const firstImagePath = imagePaths[0];
      console.log('第一个图片路径:', firstImagePath);
      
      // 如果路径是完整URL，需要提取OSS路径部分
      let ossPath = firstImagePath;
      if (firstImagePath && firstImagePath.includes('http')) {
        // 从URL中提取OSS路径（假设URL格式为：https://bucket.oss-region.aliyuncs.com/casePics/...）
        const urlMatch = firstImagePath.match(/casePics\/.+$/);
        if (urlMatch) {
          ossPath = urlMatch[0];
          console.log('从URL提取的OSS路径:', ossPath);
        } else {
          console.warn('无法从URL中提取OSS路径:', firstImagePath);
          // 尝试其他方式提取
          const urlMatch2 = firstImagePath.match(/\/casePics\/.+$/);
          if (urlMatch2) {
            ossPath = urlMatch2[0].substring(1); // 去掉开头的斜杠
            console.log('从URL提取的OSS路径（方式2）:', ossPath);
          } else {
            return;
          }
        }
      }

      // 提取文件夹路径（去掉文件名部分）
      // 例如：casePics/13800000000/1234567890/pic1.jpg -> casePics/13800000000/1234567890/
      const lastSlashIndex = ossPath.lastIndexOf('/');
      if (lastSlashIndex === -1) {
        console.warn('无法提取文件夹路径:', ossPath);
        return;
      }
      
      const folderPrefix = ossPath.substring(0, lastSlashIndex + 1);
      console.log(`开始删除OSS图片文件夹: ${folderPrefix}`);
      
      // 删除整个文件夹下的所有文件
      const deleteResult = await deleteByPrefix(folderPrefix);
      console.log('删除结果:', deleteResult);
      
      if (deleteResult.count === 0) {
        // 如果按前缀删除没找到文件，尝试直接删除所有图片路径
        console.log('按前缀删除未找到文件，尝试直接删除图片路径');
        const ossPaths = imagePaths.map(path => {
          if (path && path.includes('http')) {
            const match = path.match(/casePics\/.+$/) || path.match(/\/casePics\/.+/);
            return match ? (match[0].startsWith('/') ? match[0].substring(1) : match[0]) : null;
          }
          return path;
        }).filter(Boolean);
        
        if (ossPaths.length > 0) {
          console.log('直接删除图片路径:', ossPaths);
          await deleteCaseImagesFromOSS(ossPaths);
        }
      }
      
      console.log(`案例"${caseItem.caseTitle}"的OSS图片删除成功`);
    } catch (error) {
      // OSS删除失败不影响用户操作，只记录日志
      console.error('OSS图片删除失败:', error);
      console.error('案例已从数据库删除，但OSS图片可能未完全清理');
    }
  };

  return (
    <div className="page-container">
      <div className="page-header">
        <h2>案例管理</h2>
        <button className="create-btn" onClick={handleCreateCase}>
          新增案例
        </button>
      </div>
      <div className="page-content">
        {loading && (
          <div className="loading-container">
            <div className="loading-spinner"></div>
            <p>加载中...</p>
          </div>
        )}

        {error && (
          <div className="error-container">
            <p className="error-message">❌ {error}</p>
            <button className="retry-btn" onClick={fetchCaseList}>
              重试
            </button>
          </div>
        )}

        {!loading && !error && cases.length === 0 && (
          <div className="empty-container">
            <div className="empty-icon">📋</div>
            <p className="empty-text">暂无案例</p>
            <p className="empty-hint">点击右上角"新增案例"按钮创建第一个案例</p>
          </div>
        )}

        {!loading && !error && cases.length > 0 && (
          <div className="course-list">
            {cases.map((caseItem) => (
              <div key={caseItem._id} className="course-card">
                <div className="course-cover">
                  {caseItem.caseImages && caseItem.caseImages.length > 0 ? (
                    <img 
                      src={caseItem.caseImages[0]} 
                      alt={caseItem.caseTitle}
                      onError={(e) => {
                        e.target.style.display = 'none';
                        e.target.nextSibling.style.display = 'flex';
                      }}
                    />
                  ) : null}
                  <div className="course-cover-placeholder" style={{ display: (caseItem.caseImages && caseItem.caseImages.length > 0) ? 'none' : 'flex' }}>
                    <span>📋</span>
                  </div>
                </div>
                
                <div className="course-info">
                  <h3 className="course-name" title={caseItem.caseTitle}>
                    {caseItem.caseTitle}
                  </h3>
                  <p className="course-id">ID: {caseItem._id}</p>
                  {caseItem.caseReadCount !== undefined && (
                    <p className="course-videos">
                      👁️ 浏览量: {caseItem.caseReadCount}
                    </p>
                  )}
                  {caseItem.caseType && (
                    <p className="course-members">
                      类型: {caseItem.caseType === 'emotion' ? '情感' : caseItem.caseType === 'money' ? '金钱' : caseItem.caseType === 'study' ? '学习' : caseItem.caseType}
                    </p>
                  )}
                </div>

                <div className="course-actions">
                  <button 
                    className="action-btn edit-btn"
                    onClick={() => handleEditCase(caseItem)}
                  >
                    编辑案例
                  </button>
                  <button 
                    className="action-btn delete-btn"
                    onClick={() => handleDeleteCase(caseItem)}
                  >
                    删除案例
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default CaseManagement;
